<%--
  Created by IntelliJ IDEA.
  User: sxjzit001
  Date: 2023/5/8
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        window.onload = function (){
            setTimeout(function () {
                // alert("3s后执行")
            }, 3000)
        }
        function submit(){
            let xhr = new XMLHttpRequest(); //0
            xhr.open("post", "http://localhost:8080/TomcatDemo/LoginServletJson")//1
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
            xhr.onreadystatechange = function () {
                if (this.readyState === 4){
                    // 接收收到了响应
                    if (this.status >= 200 && this.status < 300){
                        // http的状态码是 2开头的代表成功
                        let responseText = this.responseText;
                        console.log("接受到的内容是 ",responseText)
                        let data = JSON.parse(responseText)
                        let loginState = data.state;
                        if (loginState === 1){
                            // 登录成功

                        }else {
                            // 登录失败
                            $(".loginState").html(data.msg)
                        }
                    }
                }else {
                    console.log("当前的状态是 " + this.readyState )
                }
            }
            xhr.send("name="+$(":input[name=name]").val() +"&psd=" + $(":input[type=password]").val()) //2
        }

        function submitGet(){
            let xhr = new XMLHttpRequest(); //0
            xhr.open("get", "http://localhost:8080/TomcatDemo/LoginServletJson?name="
                +$(":input[name=name]").val() +"&psd=" + $(":input[type=password]").val())//1
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
            xhr.onreadystatechange = function () {
                if (this.readyState === 4){
                    // 接收收到了响应
                    if (this.status >= 200 && this.status < 300){
                        // http的状态码是 2开头的代表成功
                        let responseText = this.responseText;
                        console.log("接受到的内容是 ",responseText)
                        let data = JSON.parse(responseText)
                        let loginState = data.state;
                        if (loginState === 1){
                            // 登录成功

                        }else {
                            // 登录失败
                            $(".loginState").html(data.msg)
                        }
                    }
                }else {
                    console.log("当前的状态是 " + this.readyState )
                }
            }
            xhr.send() //2
        }
    </script>
</head>
<body>
    <div class="loginState"></div>
    <input type="text" name="name"/>
    <input type="password" placeholder="密码" name="psd"/>
    <button onclick="submit()">post提交</button>
    <button onclick="submitGet()">get提交</button>
</body>
</html>
